<template>
    <div class="chat-wrapper flex">
        <div class="chat-left-wrap">
            <chat-employee v-model:select="state.employee"></chat-employee>
        </div>
        <div class="chat-right-wrap flex">
            <div class="chat-right-left-wrap">
                <chat-customer :employee="state.employee" v-model:select="state.client" v-model:tab="state.tabId"></chat-customer>
            </div>
            <div class="chat-right-right-wrap">
                <chat-history :client="state.client" :employee="state.employee" :tabId="state.tabId" :isSingleChat="state.tabId !== '3'"></chat-history>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { reactive } from 'vue';
    import chatHistory from './components/chat-history.vue';
    import chatCustomer from './components/chat-customer.vue';
    import chatEmployee from './components/chat-employee.vue';

    const state = reactive<any>({
        employee: {},
        client: {},
        tabId: '1',
    });
</script>

<style lang="less" scoped>
    .chat-wrapper {
        width: 100%;
        height: 100%;

        .chat-left-wrap {
            width: 200px;
            height: 100%;
            margin-right: 10px;
        }

        .chat-right-wrap {
            width: calc(100% - 200px - 10px);
            height: 100%;

            .chat-right-wrap-top {
                width: 100%;
                .chat-right-wrap-top-left {
                    width: 220px;
                    padding: 10px;
                }

                & > .flex-1 {
                    padding: 10px 10px 0 0;
                }
            }
            .chat-right-left-wrap {
                width: 300px;
            }
            .chat-right-right-wrap {
                width: calc(100% - 300px);
            }
            .chat-right-left-wrap,
            .chat-right-right-wrap {
                height: 100%;

                :deep(.loading-wrap) {
                    padding: 10px 0;
                    color: #1677ff;
                    span {
                        margin-right: 10px;
                    }
                }
            }
        }
    }
</style>
